<template>
  <div class="category-box">
    <!-- 顶部导航栏 -->
    <header class="category-header wrap">
      <i class="nbicon nbfanhui"></i>
      <div class="header-search">
        <i class="nbicon nbSearch"></i>
        <router-link tag="span" class="search-title" to="./product-list?from=category">全场50元起步</router-link>
      </div>
      <i class="nbicon nbmore"></i>
    </header>
    <!-- // 搜索框包裹层容器 -->
    <div class="search-wrap" ref="searchWrap">
      <!-- 左侧菜单栏容器 -->
      <listScroll :scrollData="state.categoryData" class="nav-side-wrapper">
        <ul class="nav-side">
          <li :class="{ active: state.categoryId == item.categoryId }" v-for="item in state.categoryData" :key="item.categoryId" v-text="item.categoryName" @click="selectMenu(item.categoryId)"></li>
        </ul>
      </listScroll>
      <!-- 右侧商品列表容器 -->
      <div class="search-content">
        <listScroll :scrollData="state.categoryData">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <template v-for="(category, indxe) in state.categoryData">
                <div class="swiper-slide" v-if="state.categoryId == category.categoryId">
                  <div class="category-list" v-for="(products, index) in category.secondLevelCategoryVOS" :key="index">
                    <p class="catogory-item">{{ products.categoryName }}</p>
                    <div class="product-item" v-for="(product, index) in products.thirdLevelCategoryVOS" :key="index" @click="selectProduct(product)">
                      <img src="//s.weituibao.com/1583591077131/%E5%88%86%E7%B1%BB.png" alt="" class="product-img" />
                      <p class="product-title">{{ product.categoryName }}</p>
                    </div>
                  </div>
                </div></template
              >
            </div>
          </div>
        </listScroll>
      </div>
    </div>
    <navBar></navBar>
  </div>
</template>
<script lang="ts" setup>
import navbar from "@/components/navbar.vue";
import { reactive, onMounted, ref } from "vue";
import { getCategory } from "@/service/good";
import navBar from "@/components/NavBar.vue";
import listScroll from "@/components/ListScroll.vue";
import { useRouter } from "vue-router";
const router = useRouter();
const state = reactive({
  categoryData: [], //分类列表 数据
  categoryId: 15, //当前选中分类的id
});
const searchWrap = ref(null);

onMounted(async () => {
  // 获取屏幕高度，适配刘海屏等机型
  let $screenHeight = document.documentElement.clientHeight;
  //
  // console.log("searchWrap.value", searchWrap.value);
  // 适配刘海屏等机型，减去刘海高度
  searchWrap.value.style.height = $screenHeight - 100 + "px";
  await getCategoryData();
});
// 获取分类列表数据
const getCategoryData = async () => {
  const { data } = await getCategory();
  state.categoryData = data;
  // console.log(state.categoryData, "分类列表数据获取成功");
};
// 点击左侧菜单 激活选中菜单类名样式 切换右侧商品列表数据
const selectMenu = (id: number) => {
  state.categoryId = id;
  // console.log("categoryId", state.categoryId);
};
const selectProduct = (item) => {
  router.push({
    path: "/product-list",
    query: {
      categoryId: item.categoryId,
    },
    from: "category",
  });
};
</script>
<style lang="less" scoped>
@import "../common/style/mixin";
.category-header {
  position: fixed;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  line-height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // border-bottom: 1px solid #e5e5e5;
  color: #656771;
  z-index: 10000;
  background-color: #fff;
  .nbfanhui {
    padding: 0 20px 0 20px;
  }
  .header-search {
    display: flex;
    margin: 10px 0px 10px 0;
    padding: 5px 0;
    height: 30px;
    line-height: 20px;
    display: flex;
    align-items: center;
    width: 80%;
    background-color: #f7f7f7;
    border-radius: 15px;
    .nbSearch {
      font-size: 15px;
      padding: 0 10px;
    }
    .search-title {
      color: #666;
      font-size: 15px;
      font-weight: 500;
    }
  }
  .nbmore {
    padding: 0 10px 0 20px;
  }
}

.search-wrap {
  .fj();
  width: 100%;
  margin-top: 50px;
  background: #f8f8f8;
  .nav-side-wrapper {
    width: 28%;
    height: 100%;
    overflow: hidden;
    .nav-side {
      width: 100%;
      .boxSizing();
      background: #f8f8f8;
      li {
        width: 100%;
        height: 56px;
        text-align: center;
        line-height: 56px;
        font-size: 14px;
        &.active {
          color: @primary;
          background: #fff;
        }
      }
    }
  }
  .search-content {
    width: 72%;
    height: 100%;
    padding: 0 10px;
    background: #fff;
    overflow-y: scroll;
    touch-action: pan-y;
    * {
      touch-action: pan-y;
    } // 解决滑动不流畅的问题
    .boxSizing();
    .swiper-container {
      width: 100%;
      .swiper-slide {
        width: 100%;
        .category-main-img {
          width: 100%;
        }
        .category-list {
          display: flex; // 设置为弹性布局，以便子元素可以换行排列
          flex-wrap: wrap; // 允许子元素换行
          flex-shrink: 0; // 不允许缩小
          width: 100%;
          .catogory-item {
            width: 100%;
            font-size: 17px;
            font-weight: 500;
            padding: 20px 0;
          }
          .product-item {
            width: 33.3333%;
            margin-bottom: 10px;
            text-align: center;
            font-size: 15px;
            .product-img {
              .wh(30px,30px);
            }
          }
        }
      }
    }
  }
}
</style>
